﻿define(function (require, exports, module) {
    var ImageStorage = require('imageStorage');
    var Canvas = require('canvas');

    var m_renderMap;
    var m_txtCityName;
    var m_cityNameLayer;

    function City(data, mouseover, mouseout) {
        this.id = data.Id;
        this.x = data.X;
        this.y = data.Y;
        this.name = data.Name;
        var img = ImageStorage.get(data.Img);
        this.iconImg = Canvas.createImageButton({ image: img, x: this.x, y: this.y, mouseover: mouseover, mouseout: mouseout });
    };

    City.prototype.renderOnMap = function (x, y) {
        this.iconImg.setPosition(this.x - x, this.y - y);
    };

    City.prototype.renderInside = function () {
        Canvas.clear();
        var insideLayer = Canvas.createLayer();

        var btnBackToMap = Canvas.createImageButton({
            image: ImageStorage.get('images\\button\\toMap.gif'),
            x: 10,
            y: 10
        });
        insideLayer.add(btnBackToMap);

        var btnDetail = Canvas.createImageButton({
            image: ImageStorage.get('images\\button\\detail.png'),
            x: 127,
            y: 10
        });
        insideLayer.add(btnDetail);

        var btnPopulation = Canvas.createImageButton({
            image: ImageStorage.get('images\\button\\population.png'),
            x: 107 * 2 + 30,
            y: 10
        });
        insideLayer.add(btnPopulation);
        Canvas.add(insideLayer);

        btnBackToMap.on('click', btnBackToMapClick);
        btnDetail.on('click', btnDetailClick(this));
        btnPopulation.on('click', btnPopulationClick(this));
    };

    function btnBackToMapClick() {
        m_renderMap();
    };

    function btnDetailClick(city) {
        return function () {
            alert('detail click');
        };
    };

    function btnPopulationClick(city) {
        return function () {
            alert('population click');
        };
    };

    function renderDetail() {
    };

    exports.createInstance = function (layer, data) {
        if (null == m_cityNameLayer) {
            m_cityNameLayer = Canvas.createLayer();
            m_txtCityName = Canvas.createText({ align: 'center', fill: 'white' });
            m_cityNameLayer.add(m_txtCityName);
            Canvas.add(m_cityNameLayer);
        }

        var city = new City(data, function () {
            m_cityNameLayer.moveToTop();
            m_txtCityName.setPosition(city.iconImg.getPosition());
            m_txtCityName.setWidth(city.iconImg.getWidth());
            m_txtCityName.setText(city.name);
            m_cityNameLayer.draw();
        }, function () {
            m_txtCityName.setText('');
            m_cityNameLayer.draw();
        });

        layer.add(city.iconImg);

        city.iconImg.on('click', function () {
            city.renderInside();
        });
        return city;
    };

    exports.setRenderMap = function (renderMap) {
        m_renderMap = renderMap;
    };
});